<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<!--导航条-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img class="navbar-brand" src="../img/logo-removebg-preview.png" class="logo">
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class=""><a href="../index.html">精选<span class="sr-only">(current)</span></a></li>
                <li><a href="#">热门</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">分类 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" id="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../views/register.html">注册</a></li>
                <li><a href="../views/login.html">登录</a></li>

            </ul>
        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->
</nav>
<!--detail-->
<div class="container" id="detail">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-2">
            <h1>佛门&nbsp;<small>文/那迁</small></h1>
            <hr>
            <div class="description">
                <dl>
                    <dd>标签： 情感,禅意</dd>
                    <dd>分类： 诗歌</dd>
                </dl>
            </div>
            <hr>
            <div class="content">
                <p>晚风在深山喋喋念经<br>
                    诸峰禅定<br><br>

                    远海的涛声宛若白色的莲花，渐渐稀落。落叶走在皈依的路上<br>
                    黄花残<br><br>

                    莫邪山一日一日修行<br>
                    晚霞横纵<br><br>

                    迁移的鹭鸟<br>
                    往而复返<br><br>

                    我亲爱的小镇啊<br>
                    为什么<br><br>

                    还在流浪<br>

                </p>

            </div>
        </div>
    </div>
</div>
<!--评论区-->
<div class="container comment">
    <div>
        <p class="small">评论区</p>
        <textarea id="texthelpblock" class="form-control" rows="3">
   </textarea>
        <p class="text-right"><button type="button" class="btn btn-primary btn-xs">提交评论</button></p>
    </div>
</div>
<!--footer-->
<footer class="container-fluid footer" style="margin-bottom: 0px">
    <div class="row company text-center" >
        XXXX股份有限公司 版权所有Copyright 2022-2022, All Rights Reserved 苏ICP备XXXXXXX
    </div>

</footer>
<style>
    #detail{
        margin-top: 60px;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    }

    .comment{
        margin-top: 20px;
    }

    .logo {
        height: 100%;
        width: 100%;
        margin-top: 5px;
    }

    #search {
        position: relative;
        left: 100px;
    }

    .blog {
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-top: 20px;
    }

    .title{
        padding-top: 5px;
        padding-left: 50px;
    }

    .description{
        padding-top: 5px;
        padding-left: 50px;
    }

    .content{
        padding-top: 5px;
        padding-left: 50px;
        padding-bottom: 10px;
    }

    .footer{
        margin-top: 50px;
    }

</style>
</body>
</html>
